<template>
  <div class="room-box">
    <div class="room-name">
      {{ room.roomname }}
    </div>
     <div class="room-info">
       <div class="room-owner">
         房主：{{ room.name }}
       </div>
       <div class="room-online">
         在线：{{ room.online }}
       </div>
       <div class="room-time">
         创建时间：{{ fomattime(room.onlinetime)}}
       </div>
     </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  name: "roomBox",
  props: {
    room: {
      type: Object,
      required: true
    }
  },
  methods: {
    fomattime(time)
    {
      return dayjs(time).format('YYYY-MM-DD')
    }
  }
};
</script>
<style>
.room-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background: #f5f5f5;
  width: 40%;
}
.room-name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  margin-left: 5px;
}
.room-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-left: 5px;
}
.room-owner {
  font-size: 16px;
  color: #666;
  margin-bottom: 5px;
}
.room-person {
  font-size: 16px;
  color: #666;
  margin-bottom: 5px;
}
.room-online {
  font-size: 16px;
  color: #666;
  margin-bottom: 5px;
}
.room-time {
  font-size: 13px;
  color: #666;
}
</style>
